import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useParams } from "react-router";
import Editor from 'for-editor'
import { Form, Input, Select, Checkbox, Button, Space } from "antd";


export function ArticleEditPage() {
    let article = useSelector(state => state.article)
    let dispatch = useDispatch()
    let [value,setValue] = useState(article.articleDetail)

    
    let { id } = useParams()
    const [form] = Form.useForm();

    let openAttachList = () => {

    }

    let saveArticle = (value)=>{
         dispatch({type:'SAVE_ARTICLE',payload: value})
    }

    let upoadImg = (file) => {
        console.log(file)
    }



    return (
        <div className={"articlePage"}>
            <Form form={form} style={{ maxWidth: 'none' }} layout="inline">
                <Form.Item label="标题">
                    <Input placeholder="请输入标题" />
                </Form.Item>
                <Form.Item label="类型">
                    <Select defaultValue="lucy" options={article.category} style={{ width: 120 }}></Select>
                </Form.Item>

                <Form.Item label="">
                    <Checkbox>置顶</Checkbox>
                </Form.Item>

                <Form.Item label="">
                    <Checkbox> 草稿 </Checkbox>
                </Form.Item>

                <Form.Item>
                    <Space>
                        <Button type="primary">{id ? '更新' : '保存'}</Button>
                        <Button type="default" htmlType="button" onClick={() => openAttachList()}>附件</Button>
                    </Space>
                </Form.Item>
            </Form>
            <Editor 
             value={article.articleDetail}
             onChange={(value)=> saveArticle(value)}
             height="calc(100vh - 150px)" 
             style={{ marginTop: 10 }} 
             addImg={f => upoadImg(f)}
             />
        </div>
    )


}